<template>
  <div class="">
    <!-- 电脑端banner -->
    <div class="pCBanner">
      <img src="../assets/images/banner2@2x.jpg" style="height: 230px;">

      <div class="tuandetial">
        <div class="container">
          <div class="AuctionCom">
            <div class="tuandetialRight">
              <img :src="info.logo" alt="" style="border-radius: 50%;">
              
            </div>
            <div class="Auctionright">
              <div class="AuctionrightTop">
                <p style="margin-right: 10px;">{{shopinfo.diji}} {{shopinfo.name}}</p>
                <p>
                  <img src="../assets/images/icon5@2x.png" >
                  {{info.view}}
                </p>
              </div>
              <div class="zypnav">
                <div>
                  {{shopinfo.mode == 1?'秒杀价:':'起步价:'}}{{shopinfo.qipai}}元
                </div>
                <div>
                  {{shopinfo.endprice > 0 ?'封顶价:'+shopinfo.endprice+'元' : '暂无封顶价'}}
                </div>
                <div>
                  推荐指数：
                  <b style="display: flex;">
                    <img v-for="(itemm,indexx) in shopinfo.ratings" src="../assets/images/xz19@2x.png">
                  </b>
                </div>
                <template v-if="shopinfo.state == 2 && shopinfo.is_pass != '1'">
                  <div>
                    成交价:{{shopinfo.topprice}}元
                  </div>
                  <div>
                     佣金:{{shopinfo.payfee}}元
                  </div>
                  <div>
                    总额:{{shopinfo.all_price}}元
                  </div>
                </template>
                <template v-if="shopinfo.state == 2 && shopinfo.is_pass == '1'">
                  <div>该商品已流拍</div>
                </template>
              </div>
              <div class="zypnav">
                <div></div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    <!-- 电脑端banner结束 -->

    <!-- 拍卖详情内容开始 -->
    <div class="TunaCom">
      <div class="container">
        <template v-if="shopinfo.offer.length>0">
          <div class="TunaComTop">
            得标信息
          </div>
          <div class="TunaComConser db">
            <div class="shop-offertr" :style="index == 0 && shopinfo.state==2 ? 'margin-left:0px':''" v-for="(itemo,index) in shopinfo.offer">
              <div :class="index == 0 && shopinfo.state==2 ? 'showredd':''" v-if="itemo.userid==shopinfo.lastuserid && index == 0">得标</div>
              <div v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div :class="index == 0 && shopinfo.state==2 ? 'showredd':''" :style="index == 0 && shopinfo.state==2 ? 'margin-left:20rpx;':''">{{itemo.username}}</div>
              <div :class="index == 0 && shopinfo.state==2 ? 'showredd':''">{{itemo.money}}元</div>
              <div :class="index == 0 && shopinfo.state==2 ? 'showredd':''">{{itemo.str_time}}</div>
            </div>
          </div>
        </template>
        <div class="TunaComTop">
          拍品详情
        </div>
        <div class="TunaComConser">
          <div>{{info.shopname}}{{info.name}}</div>
          <div>保证金：{{shopinfo.baozheng > 0 ? '¥'+shopinfo.baozheng : '免'}}</div>
          <div v-if="shopinfo.gujiatf">估价范围：{{shopinfo.gujia}}</div>
          <pre v-html="shopinfo.des"></pre>
        </div>
        <img v-for="(item,index) in swiperList" :src="item.url" alt="" style="width: 100%;">

      </div>
    </div>

    <!-- 拍卖详情内容结束 -->
  </div>
</template>

<script>
  import { goodsInfoall } from '@/api/utils.js'
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {
        swiperList: [],
        shopinfo: {},
        info: {}
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getgoodsInfoall()
    },
    mounted() {},
    methods: {
      getgoodsInfoall() {
        var that = this,
        params = {
          activeid: this.$route.query.activeid,
          goodsid: this.$route.query.goodsid
        }
        goodsInfoall(params).then(res => {
          if (res.Code == 1) {
            console.log(res)
            for (let i = 0; i < res.goodsinfo.length; i++) {
              if (res.goodsinfo[i].id == this.$route.query.goodsid) {
                this.swiperList = res.goodsinfo[i].swiperList
                this.shopinfo = res.goodsinfo[i]
              }
            }
            this.info = res.info
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../assets/css/basic.css");
  @import url("../assets/css/media.css");
  .tuandetialLefts{
    font-size: 1.95vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #110701;
  }
  .Auctionright{
    width: 45%;
  }
  .tuandetial{
    overflow: hidden;
  }
  .zypnav{
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    div{
      margin-right: 20px;
    }
  }
  .zypnav div img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .zypnav div{
    display: flex;
    align-items: center;
  }
  .container{
    padding-top: 50px;
  }
  .Auctionright{
    width: 85%!important;
  }
  .shop-offertr{
    width: 555px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .showredd{
    color: #ff3e3e;
  }
  .AuctionrightTop p:last-of-type{
    flex-shrink: 0;
  }
  @media only screen and (min-width: 100px) and (max-width: 998px) {
    .pCBanner{
      height: 160px!important;
      overflow: hidden;
    }
    .zypnav{
      flex-wrap: wrap;
      div{
        margin-right: 10px;
      }
    }
    .shop-offertr{
      width: 100%;
    }
  }
</style>